<template>
  <div>
    <a-row>
      <a-col span="11" align="center" justify="space-around">
        <a-row type="flex">
          <a-button id="print_true" @click="moreBack" disabled>批量恢复</a-button>
        </a-row>
      </a-col>
      <a-col span="7" offset="6">
        <a-row type="flex" justify="space-around">
          <a-col span="18">
            <a-input-search></a-input-search>
          </a-col>
          <!--<a-col span="2">-->
            <!--<a-button>-->
              <!--<a-icon type="filter" />-->
            <!--</a-button>-->
          <!--</a-col>-->
        </a-row>
      </a-col>
    </a-row>
    <br />
    <a-row>
      <s-table ref="table"
              :columns="columns"
              :rowSelection="rowSelection"
              :data="dataSource"
              :loading="loading"
               :scroll="{ x: 1000}"

      >
        <a slot="action" slot-scope="text,record" href="javascript:;">
          <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" href="#">
              操作
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item key="1" @click="pay_type($event,record.id)">详情</a-menu-item>
              <a-menu-item key="0">
                <a-popconfirm title="是否要恢复此行？" @confirm="back_pay(record.id)">
                  <a>恢复</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </a>
      </s-table>
    </a-row>
  </div>
</template>

<script>
    import { getPayMentList,moreBack } from '@/api/cashier'
    import { mapGetters } from 'vuex'
    import {STable} from '@/components'
export default {
    name: 'charge_be_pay_cancelStore',
    components: {
        STable
    },
    data() {
        return {
            data: [],
            select_pay:[],
            loading:false,
            columns: [
                { title: '小区', width: 100, dataIndex: 'bd_info_id_text' },
                { title: '房屋/车位/车辆', width: 200, dataIndex: 'info' },
                { title: '住户', width: 150, dataIndex: 'user_text' },
                { title: '费用名称', width: 150, dataIndex: 'name' },
                { title: '应收金额', width: 100, dataIndex: 'price' },
                { title: '实收金额', width: 100, dataIndex: 'money' },
                { title: '支付时间', width: 150, dataIndex: 'pay_time' },
                { title: '操作员', width: 150, dataIndex: 'action_user' },
                { title: '状态', width: 100, dataIndex: 'status_text' },
                { title: '备注', width: 150, dataIndex: 'remarks' },
              {
                  title: '操作',
                  key: 'operation',
                  fixed: 'right',
                  width: 100,
                  scopedSlots: { customRender: 'action' }
              }
            ],
            pas:[],
            name_c:'',
            queryParam: {},
            dataSource:parameter => {
                this.pas = parameter;
                return this.getList(Object.assign(parameter, this.queryParam))
                    .then(res => {
                        return res
                    })
            },
            selectedRowKeys:[]
        }
    },
    computed: {
        rowSelection() {
            const { selectedRowKeys } = this
            return {
                selectedRowKeys,
                onChange: (selectedRowKeys, selectedRows) => {
                    this.selectedRowKeys=selectedRowKeys
                    this.select_pay = [];
                    for (let i = 0;i < selectedRowKeys.length;i++) {
                        this.select_pay.push(this.data[selectedRowKeys[i]].id)
                    }
                    if (selectedRowKeys.length > 0) {
                        document.getElementById('print_true').disabled='';
                    } else {
                        document.getElementById('print_true').disabled=true;
                    }
                },
                getCheckboxProps: record => ({
                    props: {
                        disabled: record.name === 'Disabled User', // Column configuration not to be checked
                        name: record.name
                    }
                })
            }
        }
    },
    methods:{
        ...mapGetters(['token', 'pmsArId', 'nowMg']),
        getList(param) {
            return new Promise((resolve,reject) => {
                this.axios({
                    method:'get',
                    url: '/cashier/get_pay_del_list',
                    params:Object.assign(param,{token:this.token(),ar_id: this.pmsArId(),cm_mg_id: this.nowMg()})
                }).then(res => {
                    if(res.code === 0){
                        resolve(res.data);
                        this.data = res.data['data'];
                    }else{
                        this.$message.error(res.data.msg,2);
                    }
                }).catch(err => {
                    this.$message.error('服务器发生错误...',2);
                    this.loading = false;
                })
            })
        },
        back_pay(id) {
            this.select_pay = [id];
            this.moreBack();
        },
        pay_type({ key },id) {
            if(key === '1') {
                this.$router.push({ name: 'charge_be_pay_detail' , params: {id: id}});
            }
        },
        moreBack(){
            moreBack(Object.assign({ids:this.select_pay},{token:this.token()})).then(res => {
                if(res.code == 0) {
                    this.$notification.success({
                        message: '成功',
                        description: res.msg
                    });
                    setTimeout(() => {
                        this.selectedRowKeys=[]
                        this.$refs.table.refresh(true);
                    }, 1000)
                } else {
                    this.$notification['error']({
                        message: '错误',
                        description: res.msg,
                        duration: 4
                    })
                }

            }).catch(err => {
                this.$notification['error']({
                    message: '错误',
                    description: ((err.response || {}).data || {}).message || err || '请求出现错误，请稍后再试',
                    duration: 4
                })
            })
        },
    }
}
</script>

<style scoped>
</style>